<template>
    <div class="mylook">
        <div class="header">
            <van-nav-bar title="我的收藏" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="shopping-list">
            <div class="navs-list">
                <div v-if="isLoaing" class="cart-box">
                    <div class="loading">
                        <van-loading type="spinner" />
                    </div>
                </div>
                <ul v-else>
                    <li v-for="item in likelist.list" :key="item.gid" @click="goShoppingDetail(item.gid)">
                        <div class="shopping-box">
                            <div class="img_box">
                                <!-- <img src="https://s1.vika.cn/space/2022/10/01/aac3293ca95b4de5891b878ff6da02ce?attname=017aaff497fe80bc93c14cd484bab3ad67.jpg" alt="" /> -->
                                <img :src="item.goods_img" alt="" />
                            </div>
                            <p class="shopping-title">{{ item.goods_name }}</p>
                            <div class="shopping-price">
                                <span class="discount">￥{{ item.goods_price }}</span>
                                <span class="original">￥{{ item.goods_price - 0 + 200 }}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { getLikes, getLikeList } from "../../api/index";
import { useUserInfo } from "../../store/user";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
const store = useUserInfo();

let isLoaing = ref(true);
let likelist = reactive({
    list: [],
});

const goShoppingDetail = (gid: number) => {
    router.push({
        name: "detail",
        query: {
            gid,
        },
    });
};

const onClickLeft = () => history.back();

getLikes().then((res: any) => {
    // console.log(res.content);
    let likeArr = [];
    res.content.forEach((item: any) => {
        likeArr.push(item.like_gid);
    });
    // console.log(likeArr.toString());
    let gids = likeArr.toString();
    getLikeList({ gids }).then((res: any) => {
        // console.log(res);
        let { content } = res;
        likelist.list = content;
        isLoaing.value = false;
    });
});
</script>

<style lang="scss" scoped>
.mylike {
    position: relative;
    width: 100%;
}
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
.shopping-list {
    width: 100%;
    padding: 47px 10px 0;

    .navs-list {
        width: 100%;
        // height: 300px;
        // border: 1px solid #000;
        .loading {
            text-align: center;
            margin-top: 100px;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        li {
            width: 48%;
            // height: 300px;
            padding-bottom: 25px;
        }
        .shopping-box {
            .img_box {
                width: 100%;
                height: 200px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .shopping-title {
            margin: 15px 0 5px;
            line-height: 17px;
            height: 34px;
            font-size: 13px;
            color: #313131;
            overflow: hidden;
            // text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        .shopping-price {
            font-size: 13px;
            color: #c7273a;
            span {
                padding-right: 10px;
            }
        }
        .original {
            text-decoration: line-through;
            color: #999;
        }
    }
}
:deep(.van-nav-bar) {
    background: #353535;
}
:deep(.van-nav-bar__title) {
    color: #fff;
    font-weight: normal;
}
:deep(.van-nav-bar .van-icon) {
    color: #fff;
}
</style>
